<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Bedrock Server</title>
</head>

<body style="color: #f8f9fa; background-color: #343a40; background-image: url('https://www.minecraftforum.net/Content/1-7-688-0/Skins/MinecraftForum/images/bg_black_tile.png')">
  <div style="padding: 10px">
    <h1>Minecraft Bedrock Server</h1>

    <div>
      Server source code and documentation: <a href="https://github.com/debkbanerji/minecraft-bedrock-server" target="_blank">github.com/debkbanerji/minecraft-bedrock-server</a>
    </div>

    <div id="login-content">
      <div>
        <label for="admin-code">Admin Passcode: </label>
        <input type="password" id="admin-code" name="password" required>
        <button class="btn" id="login-button">Login</button>
      </div>
    </div>

    <div id="post-login-content" hidden="true">
      <div>
        <i style="padding-top: 10px">
          Refresh frequency: every
          <select name="refresh-rate" id="refresh-rate">
            <option value="500">0.5 Seconds</option>
            <option value="5000">5 Seconds (recommended)</option>
          </select>
        </i>
        <h2 style="padding-top: 10px">Server Resource Usage Info:</h2>
        <div style="color: #f8f9fa; background-color: #8fbfe9; background-image: url('https://www.minecraftforum.net/Content/1-7-688-0/Skins/MinecraftForum/images/bg_clouds.png')" class="card card-body">
          <pre><code id="server-resource-usage-text">Error: No Server Resource Usage Info Found</code></pre>
        </div>
        <h2 style="padding-top: 10px">Server Terminal Output:</h2>
        <div style="color: #f8f9fa; background-color: #8fbfe9; background-image: url('https://www.minecraftforum.net/Content/1-7-688-0/Skins/MinecraftForum/images/bg_clouds.png')" class="card card-body">
          <pre><code id="server-terminal-output">Error: No Terminal Output Found</code></pre>
        </div>
      </div>

      <div style="padding-top: 10px">
        <button class="btn dropdown-toggle" id="toggle-restore-backup-controls-button" type="button" data-toggle="collapse" data-target="#restore-backup-controls" aria-expanded="false" aria-controls="restore-backup-controls">
          Restore Backup
        </button>
        <button class="btn" id="trigger-manual-backup-button">Trigger Manual Backup</button>
        <button class="btn" id="print-resource-usage-button">Print Resource Usage</button>
        <button class="btn" id="print-player-list-button">Print Player List</button>
        <button class="btn btn-danger" id="stop-server-button">Stop Server</button>
        <div class="collapse" id="restore-backup-controls">
          <div class="card card-body">
            <div class="dropdown">
              <button class="btn dropdown-toggle" type="button" id="restore-backup-dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Select Backup to Restore
              </button>
              <div class="dropdown-menu" id="restore-backup-options" aria-labelledby="restore-backup-dropdown-button">
                <a class="dropdown-item">No backups found (yet)</a>
              </div>
              <br>
              <span id="selected-backup"></span> <span id="selected-backup-timestamp"></span>
              <br>
              <button class="btn btn-danger" id="trigger-restore-backup-button" disabled="true">Force Restore Selected Backup and Restart</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src="https://bitwiseshiftleft.github.io/sjcl/sjcl.js" crossorigin="anonymous"></script>
  <script src="js/index.js">
  </script>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


</body>

</html>
